<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS Select</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<!--使用ng-options创建选择框-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<select ng-init="selectedName = names[0]" ng-model="selectedName"-->
            <!--ng-options="x for x in names">-->
    <!--</select>-->
<!--</div>-->
<!--<p>该实例演示了ng-options指令的使用</p>-->

<!--使用ng-repeat创建选择框-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<select>-->
        <!--<option ng-repeat="x in names">{{x}}</option>-->
    <!--</select>-->
<!--</div>-->
<!--<p>该实例演示了ng-repeat指令来创建下拉列表</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.names = ["Google", "Runoob", "Taobao"];-->
    <!--})-->
<!--</script>-->

<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>选择网站:</p>-->
    <!--<select ng-model="selectedSite">-->
        <!--<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>-->
    <!--</select>-->

    <!--<h1>你选择的是: {{selectedSite}}</h1>-->
<!--</div>-->
<!--<p>该实例演示了使用ng-repeat指令来创建下拉列表, 选中的值是一个字符串</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.sites = [-->
            <!--{site: "Google", url: "http://www.google.com"},-->
            <!--{site: "Runoob", url: "http://www.runoob.com"},-->
            <!--{site: "Taobao", url: "http://www.taobao.com"}-->
        <!--];-->
    <!--})-->
<!--</script>-->

<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>选择网站:</p>-->
    <!--<select ng-model="selectedSite" ng-options="x.site for x in sites">-->
    <!--</select>-->

    <!--<h1>你选择的是: {{selectedSite.site}}</h1>-->
    <!--<p>网址为: {{selectedSite.url}}</p>-->
<!--</div>-->
<!--<p>该实例演示了使用ng-option指令来创建下拉列表, 选中的值是一个对象</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.sites = [-->
            <!--{site: "Google", url: "http://www.google.com"},-->
            <!--{site: "Runoob", url: "http://www.runoob.com"},-->
            <!--{site: "Taobao", url: "http://www.taobao.com"}-->
        <!--];-->
    <!--})-->
<!--</script>-->

<!--数据源为对象-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>选择的网站是:</p>-->
    <!--<select ng-model="selectedSite" ng-options="x for (x, y) in sites">-->

    <!--</select>-->

    <!--<h1>你选择的值是: {{selectedSite}}</h1>-->
<!--</div>-->
<!--<p>该实例演示了使用对象作为创建下拉列表</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.sites = {-->
            <!--site01: "Google",-->
            <!--site02: "Runoob",-->
            <!--site03: "Taobao"-->
        <!--};-->

        <!--$scope.selectedSite = "Google";-->
    <!--})-->
<!--</script>-->

<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--<p>选择一辆车:</p>-->
    <!--<select ng-model="selectedCar", ng-options="x for (x, y) in cars">-->

    <!--</select>-->
    <!--<h1>你的选择是: {{selectedCar.brand}}</h1>-->
    <!--<h2>模型: {{selectedCar.model}}</h2>-->
    <!--<h3>颜色: {{selectedCar.color}}</h3>-->
<!--</div>-->

<!--<p>注意选中的值是一个对象</p>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.cars = {-->
            <!--car01: {brand: "Ford", model: "Mustang", color: "red"},-->
            <!--car02: {brand: "Fiat", model: "500", color: "white"},-->
            <!--car03: {brand: "Volvo", model: "XC90", color: "black"}-->
        <!--}-->
    <!--})-->
<!--</script>-->

<div ng-app="myApp" ng-controller="myCtrl">
    <p>选择一辆车:</p>
    <select ng-model="selectedCar", ng-options="y.brand for (x, y) in cars">

    </select>
    <h1>你的选择是: {{selectedCar.brand}}</h1>
    <h2>模型: {{selectedCar.model}}</h2>
    <h3>颜色: {{selectedCar.color}}</h3>
</div>

<p>下拉列表中的选项也可以是对象的属性</p>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.cars = {
            car01: {brand: "Ford", model: "Mustang", color: "red"},
            car02: {brand: "Fiat", model: "500", color: "white"},
            car03: {brand: "Volvo", model: "XC90", color: "black"}
        };

        $scope.selectedCar = $scope.cars.car01;
    })
</script>
</body>
</html>